// 父级设置flex
.flex {
	display: flex
}

// 主轴排列方向，X轴和Y轴
.flex-x {
	flex-direction: row
}

.flex-y {
	flex-direction: column
}

/* 
确认主轴情况下的对齐方式
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等
space-around：每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍。
*/
.flex-x-start {
	justify-content: flex-start
}

.flex-x-center {
	justify-content: center
}

.flex-x-end {
	justify-content: flex-end
}

.flex-x-between {
	justify-content: space-between
}

.flex-x-around {
	justify-content: space-around
}

.flex-x-evenly {
	justify-content: space-evenly
}

/* 
设置交叉轴上对齐方式，且在只有一根轴线情况下，即不设置换行
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐 
*/
.flex-y-start {
	align-items: flex-start
}

.flex-y-center {
	align-items: center
}

.flex-y-end {
	align-items: flex-end
}

// 换行
.flex-wrap {
	flex-wrap: wrap;
}

// 子元素
.self-start {
	align-self: flex-start;
}

.self-center {
	align-self: flex-center;
}

.self-end {
	align-self: flex-end;
}

.flex-1 {
	flex: 1 1 0%;
}

.rounded {
	border-radius: 100%;
}

// 宽度
@for $i from 1 through 100 {
	.w-#{$i}vw {
		width: #{$i}vw;
	}

	.h-#{$i}vh {
		height: #{$i}vh;
	}
}
// 宽度
@for $i from 0 through 900 {
	.w-#{$i}px {
		width: #{$i}rpx;
	}

	.h-#{$i}px {
		height: #{$i}rpx;
	}

	.leading-#{$i}px {
		line-height: #{$i}rpx;
	}

	.p-#{$i}px {
		padding: #{$i}rpx;
	}

	.px-#{$i}px {
		padding-left: #{$i}rpx;
		padding-right: #{$i}rpx;
	}

	.py-#{$i}px {
		padding-top: #{$i}rpx;
		padding-bottom: #{$i}rpx;
	}

	.pl-#{$i}px {
		padding-left: #{$i}rpx;
	}

	.pr-#{$i}px {
		padding-right: #{$i}rpx;
	}

	.pt-#{$i}px {
		padding-top: #{$i}rpx;
	}

	.pb-#{$i}px {
		padding-bottom: #{$i}rpx;
	}

	.m-#{$i}px {
		margin: #{$i}rpx;
	}

	.mx-#{$i}px {
		margin-left: #{$i}rpx;
		margin-right: #{$i}rpx;
	}

	.my-#{$i}px {
		margin-top: #{$i}rpx;
		margin-bottom: #{$i}rpx;
	}

	.ml-#{$i}px {
		margin-left: #{$i}rpx;
	}

	.mr-#{$i}px {
		margin-right: #{$i}rpx;
	}

	.mt-#{$i}px {
		margin-top: #{$i}rpx;
	}

	.mb-#{$i}px {
		margin-bottom: #{$i}rpx;
	}

	.rounded-#{$i}px {
		border-radius: #{$i}rpx;
	}

	.text-#{$i}px {
		font-size: #{$i}rpx;
	}

	.top-#{$i}px {
		top: #{$i}rpx;
	}

	.right-#{$i}px {
		right: #{$i}rpx;
	}

	.bottom-#{$i}px {
		bottom: #{$i}rpx;
	}

	.left-#{$i}px {
		left: #{$i}rpx;
	}
}

.m-a{
	margin-left: auto;
	margin-right: auto;
}

.absolute {
	position: absolute;
}

.relative {
	position: relative;
}

.w-full {
	width: 100%;
}

.w-1-2 {
	width: 50%;
}

.w-1-3 {
	width: 33.333%;
}

.w-1-4 {
	width: 25%;
}

.w-1-5 {
	width: 20%;
}

.h-full {
	height: 100%;
}

.font-bold {
	font-weight: bold;
}

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

.color-white {
	color: #fff;
}

.color-333 {
	color: #333;
}

.color-666 {
	color: #666;
}

.color-999 {
	color: #999;
}

.color-pink {
	color: deeppink;
}

.color-blue {
	color: deepskyblue;
}

.bg-white {
	background: #fff;
}

.bg-333 {
	background: #333;
}

.bg-dedede {
	background: #dedede;
}

.bg-e1e1e1 {
	background: #e1e1e1;
}

.bg-f1f1f1 {
	background: #f1f1f1;
}

.color-blue {
	color: rgb(0, 175, 254)
}

.bg-blue {
	background: rgb(0, 175, 254)
}

.bg-pink {
	background-color: rgb(255, 233, 246);
}

.overflow-hidden {
	overflow: hidden;
}

.border-box{
	box-sizing: border-box;
}